<%--
  Created by IntelliJ IDEA.
  User: fjh
  Date: 2020/6/13
  Time: 16:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>--%>
<!DOCTYPE html>
<html>
<head>
    <!-- Meta-Information -->
    <title>酒店客房管理系统</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">

    <%--    edit by fjh--%>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body class="expand-data panel-data">
<div class="topbar">
    <div class="logo">
        <h1><a href="#" title=""><img src="images/logo1.png" alt="" /></a></h1>
    </div>
    <div class="topbar-data">
        <ul class="tobar-links">
            <li><a href="#" title=""><i class="ion-ios-bell"></i><span class="blue-bg">02</span></a>
                <div class="nti-drp-wrp">
                    <h5 class="blue-bg"><span>You Have</span> 7 Notifications</h5>
                    <div class="nti-lst">
                        <div class="nti-usr">
                            <span class="brd-rd50 rd-bg"><i class="fa fa-cog"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Privacy settings changed</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 drkblu-bg"><i class="ion-ios-personadd"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Mike has added you as friend</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 orng-bg"><i class="ion-thumbsup"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                                <i>like your timeline photo</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 grn-bg"><i class="ion-information-circled"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Curabitur id eros limes suscipit blandit.</i>
                            </div>
                        </div>
                    </div>
                    <div class="nt-ftr"><a href="#" title="">View All</a></div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-drafts"></i><span class="green-bg">10</span></a>
                <div class="nti-drp-wrp">
                    <h5 class="green-bg"><span>You Have</span> 7 New Messages</h5>
                    <div class="nti-lst">
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Privacy settings changed</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Mike has added you as friend</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                                <i>like your timeline photo</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Curabitur id eros limes suscipit blandit.</i>
                            </div>
                        </div>
                    </div>
                    <div class="nt-ftr"><a href="#" title="">View All</a></div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-settings"></i></a>
                <div class="set-lst">
                    <div class="set-bd">
                        <h4>General Settings</h4>
                        <ul class="sett-lst">
                            <li>
                <span class="chck-bx">
                    <input id="set1" type="checkbox">
                    <label for="set1">Report Panel Usage</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set2" type="checkbox">
                    <label for="set2">Mail Redirect</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set3" type="checkbox">
                    <label for="set3">Expose Author Name</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                        </ul>
                        <h4>Chat Settings</h4>
                        <ul>
                            <li>
                <span class="chck-bx">
                    <input id="set4" type="checkbox">
                    <label for="set4">Show Me As Online</label>
                </span>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set5" type="checkbox">
                    <label for="set5">Turn Off Notifications</label>
                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="set-ft">
                        <a class="btn-danger" href="#" title=""><i class="fa fa-trash"></i> Delete Chat History</a>
                    </div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-contacts"></i></a>
                <div class="cnt-lst">
                    <ul>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Smith Doe</a></h5>
                                    <span>Co Worker</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Katti Smith</a></h5>
                                    <span>Graphic Designer</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Willimes Domson</a></h5>
                                    <span>Family Adviser</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Holli Doe</a></h5>
                                    <span>Company CEO</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <form class="topbar-search">
            <button type="submit"><i class="ion-ios-search-strong"></i></button>
            <input type="text" placeholder="Type and Hit Enter" />
        </form>
        <div class="usr-act">
            <span><img src="images/resource/topbar-usr1.jpg" alt="" /><i class="sts away"></i></span>
            <div class="usr-inf">
                <div class="usr-thmb brd-rd50">
                    <img class="brd-rd50" src="images/resource/usr.jpg" alt="" />
                    <i class="sts away"></i>
                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
                <h5><a href="#" title="">John Smith</a></h5>
                <span>Co Worker</span>
                <i>076 9477 4896</i>
                <div class="act-pst-lk-stm">
                    <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
                    <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
                </div>
                <div class="usr-ft">
                    <a class="btn-danger" href="#" title=""><i class="fa fa-sign-out"></i> Logout</a>
                </div>
            </div>
        </div>
    </div>
    <div class="topbar-bottom-colors">
        <i style="background-color: #2c3e50;"></i>
        <i style="background-color: #9857b2;"></i>
        <i style="background-color: #2c81ba;"></i>
        <i style="background-color: #5dc12e;"></i>
        <i style="background-color: #feb506;"></i>
        <i style="background-color: #e17c21;"></i>
        <i style="background-color: #bc382a;"></i>
    </div>
</div><!-- Topbar -->

<header class="side-header light-skin expand-header">
    <div class="nav-head">主菜单<span class="menu-trigger"><i class="ion-android-menu"></i></span></div>
    <nav class="custom-scrollbar">
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>房间占用查询</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/searchOccupyRoom" title="">查询</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>客房账单管理</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/roomBillPage" title="">客房账单</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-android-contact"></i> <span>入住服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addStayBusiness" title="">登记入住</a></li>
                </ul>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/stayBusinessPage" title="">住房服务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>预定服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addRoomBusiness" title="">预定客房</a></li>
                    <li><a href="/hotelsystem/roomBusinessPage" title="">预定业务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>房客管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getGuestMain.action" title="">房客列表</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>会员管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getVipMain.action" title="">会员列表</a></li>

                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>商品订单</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/goodsOrder.findAll?page=1&sie=4" title="">查看商品订单</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header><!-- Side Header -->

<div class="option-panel">
    <span class="panel-btn"><i class="fa ion-android-settings fa-spin"></i></span>
    <div class="color-panel">
        <h4>Text Color</h4>
        <span class="color1" onclick="setActiveStyleSheet('color1'); return false;"><i></i></span>
        <span class="color2" onclick="setActiveStyleSheet('color2'); return false;"><i></i></span>
        <span class="color3" onclick="setActiveStyleSheet('color'); return false;"><i></i></span>
        <span class="color4" onclick="setActiveStyleSheet('color4'); return false;"><i></i></span>
        <span class="color5" onclick="setActiveStyleSheet('color5'); return false;"><i></i></span>
    </div>
</div><!-- Options Panel -->

<div class="panel-content">
    <div class="filter-items">
        <div class="row grid-wrap mrg20">

            <%--            edit by fjh--%>
            <%--            员工列表--%>
            <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                <div class="widget proj-order pad50-40">
                    <div class="wdgt-opt">
                        <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                        <div class="wdgt-opt-lst brd-rd5">
                            <a class="delt-wdgt" href="#" title="">Delete</a>
                            <a class="expnd-wdgt" href="#" title="">Expand</a>
                            <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                        </div>
                    </div>
                    <div class="wdgt-ldr">
                        <div class="ball-scale-multiple">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <h4 class="widget-title" style="margin-bottom: 10px;">客人列表</h4>

                    <div class="table-wrap" style="margin-bottom: 20px;">

                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <input id="guest_name" type="text" placeholder="--姓名--" class="layui-input">
                                    </div>
                                    <div class="layui-inline">
                                        <input id="guest_phone" type="text" placeholder="--手机--" class="layui-input">
                                    </div>
                                    <button id="btn_search" type="button" class="layui-btn">查询</button>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <button id="btn-add" class="layui-btn layui-btn-normal">添加</button>

                            </div>

                        </div>
                        <table id="tb_guest" lay-filter="tb_guest">
                        </table>
                    </div>
                </div>
            </div>

        </div><!-- Filter Items -->
    </div>
</div><!-- Panel Content -->








<footer>
    <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
    <span>10GB of 250GB Free.</span>
</footer>

<!-- Vendor: Javascripts -->
<%--<script src="js/jquery.min.js" type="text/javascript"></script>--%>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>


<%--edit by fjh--%>
<script src="layui/layui.js"></script>
<script type="text/html" id="tpl-addTime">
    {{#
    return layui.util.toDateString(d.addTime, "yyyy-MM-dd")
    }}
</script>
<script type="text/html" id="mytoolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="guest_del">删除</button>
    </div>
</script>
<script type="text/javascript">
    //edit by fjh
    layui.use(['jquery','table'],function(){
        var table = layui.table;
        var $ = layui.jquery;
        //渲染表格
        table.render({
            elem:"#tb_guest",//渲染的表格的id
            url:"getGuestListByPage.action",//请求后台的接口
            cellMinWidth:80,
            loading:true,
            even:true,
            cols:[[//表头
                {field:'id',title:'ID',width:50},
                {field:'name',title:'姓名',width:80},
                {field:'gender',title:'性别',width:80},
                {field:'resd_id',title:'身份证号',width:120},
                {field:'phone',title:'手机号码',width:120},
                {field:'add_time',title:'入住时间',width:120,templet:'#tpl-addTime'},
                {field:'is_vip',title:'是否VIP',width:120},
                {field:'tag',title:'入住状态',width:120},
                {title:'操作',toolbar:"#mytoolbar",width:120}
            ]],
            page:true//是否开启分页
        });

        //搜索事件
        $("#btn_search").on("click",function () {
            reloadGuest();
        });

        //添加事件
        $("#btn-add").on("click",function () {
            window.open("${pageContext.request.contextPath}/addguest.jsp")
        });



        //表格的重载
        function reloadGuest(){
            table.reload("tb_guest",{
                page:{
                    curr:1 //重新从第1页显示
                },
                where:{
                    name:$("#guest_name").val(),
                    phone:$("#guest_phone").val()
                }
            },'data');
        }

        //监听表格的工具栏的事件
        table.on('tool(tb_guest)',function (obj) {
            var data = obj.data;

            if(obj.event == 'guest_del'){
                delGuest(data.id);
            }
        });


        //删除房客信息
        function delGuest(id) {
            $.ajax({
                url:"delGuest.action",
                type:"POST",
                data:{'id':id},
                datatype:'JSON',
                cache:false,
                success:function (data) {
                    if(data.code == 0){
                        alert("删除成功！");
                        //重载表格
                        reloadGuest();
                    }
                    else{
                        alert(data.msg);
                    }
                    
                },
                error:function () {
                    alert("删除失败")
                    
                }

            })
            
        }

    });
</script>

</body>
</html>